<template>

  <div class="main">
    <!-- 主体区域 -->
    <section id="app">
      <TodoHeader @add="handleAdd"></TodoHeader>
      <TodoMain @del="handleDel" :list="list"></TodoMain>
      <TodoFooter @clear="handleClear" :list="list"></TodoFooter>
    </section>

    <components-communication></components-communication>
    <button @click="isShow = true">退出系统</button>
    <BaseDialog :visible.sync="isShow"></BaseDialog>
    <BaseChart></BaseChart>
  </div>

</template>

<script>

import ButtonCounter from "@/components/scoped/ButtonCounter.vue";
import Son from "@/components/scoped/Son.vue";
import UserInfo from "@/components/scoped/UserInfo.vue";
import BaseProgress from "@/components/scoped/BaseProgress.vue";
import TodoHeader from "@/components/xiaoheiNote/TodoHeader.vue";
import TodoMain from "@/components/xiaoheiNote/TodoMain.vue";
import TodoFooter from "@/components/xiaoheiNote/TodoFooter.vue"
import componentsCommunication from "@/components/scoped/componentsCommunication.vue";
import BaseDialog from "@/components/scoped/BaseDialog.vue";
import BaseChart from "@/components/scoped/BaseChart.vue";


export default {
  name: 'App',
  components: {
    BaseChart,
    BaseDialog,

    BaseProgress, UserInfo, Son, ButtonCounter, TodoHeader, TodoMain, TodoFooter, componentsCommunication},

  data() {
    return {
      isShow:false,
      list: JSON.parse(localStorage.getItem('list')) || [
        {id: 1, name: '打篮球'},
        {id: 2, name: '看电影'},
        {id: 3, name: '逛街'},
      ],

    }
  },
  watch: {
    list: {
      deep: true,
      handler(newValue){
        localStorage.setItem('list',JSON.stringify(newValue))
      }
    }
  },
  methods: {
    handleAdd(todoName) {
      this.list.unshift({
        id: +new Date(),
        name: todoName
      })
    },
    handleDel(id){
      console.log(id)
      this.list = this.list.filter(item => item.id !== id)
    },
    handleClear(){
      this.list = []
    }
  }
}
</script>

<style scoped>
.main {

}
</style>
